<template>
  <div class="content">
    <div class="head">
      <span>角色管理</span>
    </div>

    <Button class="addRole" type="primary" @click="add">新增</Button>
    <Table stripe border :loading="loading" :columns="columns1" :data="data1"></Table>

    <Modal v-model="modal1" title="角色管理" @on-ok="ok" @on-cancel="cancel" cancel-text="取消" ok-text="确定">
      <Form label-position="left" :label-width="70">
        <FormItem label="角色名称">
          <Input v-model="roleName" placeholder="角色名称"></Input>
        </FormItem>
        <FormItem label="角色类型">
          <Select v-model="roleType" style="width:200px">
            <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="modal2" title="Title" @on-cancel="deleteCancel" @on-ok="deleteOk" cancel-text="取消" ok-text="确定">
      <p>是否确认删除用户</p>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      roleName: "",
      roleType: "",
      id: "",
      roleList: [{ value: "0", label: "系统管理员" }],
      modal1: false,
      modal2: false,
      loading: true,
      editOrAdd: false,
      columns1: [
        {
          title: "管理员",
          key: "roleName",
          align: "center"
        },
        {
          title: "管理员角色",
          key: "roleType",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("strong", params.row.roleType=='0'?'系统管理员':'')
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delete(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      this.$http.post("/api/auth/sysrole/doGetList").then(res => {
        this.data1 = res.retBody;
        this.loading = false;
      });
    },
    /**
     * 添加角色
     */
    add() {
      this.modal1 = true;
      this.editOrAdd = true;
      //点击新增的时候先清除表单
      this.roleName = "";
      this.roleType = "";
    },
    /**
     * 添加角色
     */
    addRole() {
      const self = this;
      this.$http
        .post("/api/auth/sysrole/doSaveRole", { roleName: this.roleName })
        .then(res => {
          if (res.retHead.code == "0000000") {
            self.$Message.success({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          } else {
            self.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
          this.initData();
        });
    },
    /**
     * 编辑
     */
    edit(row) {
      console.log(row);
      this.roleName = "";
      this.roleType = "";
      this.id = row.id;
      this.roleName = row.roleName;
      this.roleType = row.roleType;
      this.modal1 = true;
      this.editOrAdd = false;
    },
    /**
     * 编辑提交
     */
    editSubmit() {
      const self = this;
      this.$http
        .post("/api/auth/sysrole/doModRole", {
          roleName: this.roleName,
          id: this.id,
          roleType: this.roleType
        })
        .then(res => {
          if (res.retHead.code == "0000000") {
            self.$Message.success({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          } else {
            self.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
          this.initData();
        });
    },
    /**
     * 弹出弹出框
     */
    delete(row) {
      this.id = row.id; //获取点击删除管理员的id;
      this.modal2 = true;
    },
    ok() {
      if (this.editOrAdd) {
        this.addRole();
      } else {
        this.editSubmit();
      }
    },
    cancel() {},
    deleteCancel() {},
    /**
     *删除管理员
     */
    deleteOk() {
      const self = this;
      this.$http
        .post("/api/auth/sysrole/doDelRole", { id: this.id })
        .then(res => {
          if (res.retHead.code == "0000000") {
            self.$Message.success({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          } else {
            self.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
          this.initData();
        });
    }
  }
};
</script>

<style>
.ivu-checkbox-wrapper {
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 1px;
}
.ivu-tree-title {
  font-size: 13px;
}
</style>
<style scoped>
.add {
  border-bottom: 1px solid #e0dfdf;
  height: 37px;
}
.add span {
  display: inline-block;
  height: 100%;
  line-height: 100%;
  padding: 10px 20px;
  color: #2d8cf0;
  border-bottom: 2px solid #2d8cf0;
  font-size: 16px;
  cursor: pointer;
}
.addRole {
  margin: 10px;
}
</style>
